<div v-cloak id="app" class="main-content">
    <one-table :option="tableOption" :data="tableData" :loading="loading" @current-change="" @size-change="">
        <template slot="menuLeft">
            <el-button type="primary" size="mini" @click="syncList">同步平台</el-button>
            
        </template>
        <!-- 自定义操作列 -->
        <template slot="operates" slot-scope="scope">
            <el-button title='更新信息' size="mini" type="primary" :disabled="scope.row.system" class="_tool" @click="syncInfo(scope.row, scope.index)">
                <i class="el-icon-refresh"></i>
            </el-button>
        </template>
        <!-- 自定义列 -->
        <template slot="base" slot-scope="scope">
            <div flex="main:left">
                <el-image 
                    style="width: 50px; height: 50px"
                    :src="scope.row.head_img" >
                    <div slot="error" >
                        <i style="font-size:50px" class="el-icon-picture-outline"></i>
                    </div>
                </el-image>
                <div style="text-align: left;margin-left: 10px;">
                    {{scope.row.nick_name}}<br>
                    {{scope.row.authorizer_appid || scope.row.AuthorizerAppid}}
                <div>
            </div>
        </template>
        <template slot="extbase" slot-scope="scope">
            <div flex="main:left">
                <div style="text-align: left;margin-left: 10px;">
                    {{scope.row.user_name}}<br>
                    {{scope.row.principal_name}}
                <div>
            </div>
        </template>
        <template slot="exttype" slot-scope="scope">
            <div flex="main:left">
                <div style="text-align: left;margin-left: 10px;">
                    {{scope.row.MiniProgramInfo ? '小程序' : '公众号'}}<br>
                    {{scope.row.verify_type_info == -1 ? '未认证' : '微信认证'}}
                <div>
            </div>
        </template>
        <template slot="auth_time" slot-scope="scope">
            <span>{{dateFormat(scope.row.auth_time)}}</span>
        </template>

        
    </one-table>
</div>

{include file='common@components/one-table'}

<script>

    const _tableData = {:json_encode($table_data, 256)};
    new Vue({
        el: '#app',
        data() {
            return {
                loading: false,
                // tabData:_tabData,
                tableData: _tableData || [],
                tableOption: {
                    index: true,
                    operates: {width: 60},
                    header: true,
                    size: 'mini',
                    page: false,
                    column: [{
                        label: '基础信息',
                        prop: 'base',
                        width: 240,
                        slot:true,
                    }, {
                        label: '登记信息',
                        prop: 'extbase',
                        width: 300,
                        slot:true,
                    }, {
                        label: '认证信息',
                        align: 'left',
                        slot:true,
                        prop: 'exttype'
                    }, {
                        label: '授权时间',
                        prop: 'auth_time',
                        slot: true,
                        width: 160,
                    }, ]
                }
            }
        },

        created() {

        },
        mounted() {
           
        },
        methods: {
            //时间格式化
            dateFormat: function (val) {
                if(!val){
                    return ''
                }
                var t = new Date(val*1000)
                let year = t.getFullYear()
                let month = this.dateIfAddZero(t.getMonth()+1)
                let day = this.dateIfAddZero(t.getDate())
                let hours = this.dateIfAddZero(t.getHours())
                let minutes = this.dateIfAddZero(t.getMinutes())
                let seconds = this.dateIfAddZero(t.getSeconds())
                return year + '-' + month + '-' + day+ ' ' + hours + ':' + minutes+ ':' + seconds
            },
            dateIfAddZero : function (time) {
                return time < 10 ? '0' + time : time  
            },
           
            //同步列表
            syncList(row,index) {
                let _this = this
                _this.loading = true
                request({
                    params: {
                        s: 'one_wxopen/auth/index/action/synclist',
                    },
                    method: 'post'
                }).then(e => {
                    _this.loading = false
                    e.data.code == 0 && window.location.reload(true);
                })
            },
            //同步信息
            syncInfo(row,index) {
                let _this = this
                _this.loading = true
                request({
                    params: {
                        s: 'one_wxopen/auth/index/action/syncinfo',
                    },
                    data:{authorizer_appid:row.authorizer_appid},
                    method: 'post'
                }).then(e => {
                    _this.loading = false
                    e.data.code == 0 && window.location.reload(true);
                })
            },
        }
    })
</script>
<style>
    .el-table_1_column_5 div.cell{
        overflow: hidden;
        white-space: nowrap!important;
    }
</style>